<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
/* 这里可以添加全局样式 */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background-color: #f0f2f5;
}

html {
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .el-message {
    min-width: 300px !important;
  }

  .el-dialog {
    width: 90% !important;
    margin-top: 20vh !important;
  }
}

/* 添加过渡效果 */
* {
  transition: background-color 0.3s, color 0.3s;
}

/* 主题色相关 */
.text-primary {
  color: var(--theme-color) !important;
}

.bg-primary {
  background-color: var(--theme-color) !important;
}

/* 暗黑模式适配 */
.dark-theme {
  .el-card,
  .el-dialog,
  .el-message-box,
  .el-dropdown-menu {
    background-color: #1f1f1f !important;
    border-color: #363637 !important;
    color: #ffffff !important;
  }
}
</style>
